var wrapperUl=$('.wrapperUl');
var wrapperW=parseInt(wrapperUl.css('width'));
var wrapperH=parseInt(wrapperUl.css('height'));
var liW=wrapperW /5;
var liH=wrapperH /5;

createLi();
function createLi(){
    for(var i=0;i<5;i++){
        for(var j=0;j<5; j++){
            $('<li><div class="box"><img scr="" /></div></li>')
            .css({
                'width':liW+'px',
                'height':liH+'px',
                'left':j*liW,
                'top':i*liH,
                'transform':'scale(0.9) rotate('+(Math.random()*40-20)+'deg)'+
                    'translateX('+(30*j-60)+'px)'+
                    'translateY('+(30*i-60)+'px)'+
                    'translateZ(-'+Math.random()*500+'px)'

                   
            })
            .find('img').attr('src','./img/'+(i*5+j)+'.jpg')
            .end()
            .appendTo(wrapperUl);
        }
    }
    bindEvent();
}
function bindEvent(){
    var change=true;
    $('li').on('click',function(){
        if(change){
            var Img=$(this).find('img').attr('src');
            var BGleft=0;
            var BGTop=0;
            $('li').each(function(index){
                var $this=$(this);
                $this.delay(10*index).animate({'opacity':0},200,function(){
                    $this.css({
                    'transform':' rotate(0deg)'+
                    'translateX(0px)'+
                    'translateY(0px)'+
                    'translateZ(0px)'
                    });
                $this.find('.box').css({
                    'transform':'scale(1)'
                });
                $this.find('img').attr('src',Img)
                .css({
                    'position': 'absolute',
                    'width':wrapperW+'px',
                    'height':wrapperH+'px',
                    'left':-BGleft,
                    'top':-BGTop

                });
                //你选中的图片 已经规定了位置  然后让他减了
                BGleft +=liW;
                if(BGleft>=wrapperW){
                    BGTop +=liH;
                    BGleft=0;
                }
                $this.animate({'opacity':1},200);
                })
            })
            change=false;
    }else{
        change=true;
        $('li').each(function(index){
            var j=index%5;
            var i=Math.floor(index/5);
            var $this=$(this);
            $this.find('img').css({
                 'position': 'absolute',
                 'width':'100%',
                 'height':'100%',
                 'left':0,
                 'top':0,
                 'transform':'scale(0.9)'
            })
            $this.find('img').attr('src','./img/'+index+'.jpg');
            $this.css({
                'width':liW+'px',
                'height':liH+'px',
                'left':j*liW,
                'top':i*liH,
                'transform':'scale(0.9) rotate('+(Math.random()*40-20)+'deg)'+
                    'translateX('+(30*j-60)+'px)'+
                    'translateY('+(30*i-60)+'px)'+
                    'translateZ(-'+Math.random()*500+'px)'

                   
            })
            
        })
    }
    })
    
}